<template>
  <div>
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员权益</el-breadcrumb-item>
        <el-breadcrumb-item>编辑系统自带权益</el-breadcrumb-item>
      </el-breadcrumb>
      <h3>编辑系统自带权益</h3>
    </el-card>
    <el-card id="editbox1">
      <el-form ref="elForm" :model="formData"  size="medium" label-width="77px">
        <!-- 权益名称 -->
        <el-col :span="20" id="box">
          <el-form-item label="权益名称">
            <el-input v-model="input6" disabled placeholder="请输入单行文本单行文本" clearable :style="{width: '50%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 权益说明 -->
        <el-col :span="20" id="box1">
          <el-form-item label="权益说明">
            <el-input v-model="input7" placeholder="请输入单行文本" clearable :style="{width: '50%'}"></el-input>
          </el-form-item>
        </el-col>
        <!-- 上传图片 -->
        <el-col :span="20" >
        <el-form-item label="上传图标" id="box2">
            <el-upload
              class="avatar-uploader"
              action="http://172.16.12.80:8080/vip/uploadImage"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              name="img"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        <!-- 权益状态 -->
        </el-col>
        <el-col :span="20" >
        <el-form-item label="权益状态" id="box3">
          <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
        </el-col>
        <el-col>
        <el-form-item id="box4">
          <el-button type="primary" @click="edit">提交</el-button>
          <el-button>返回</el-button>
        </el-form-item>
        </el-col>
      </el-form>
    </el-card>

    <el-card id="box22">
      <span>设置规则</span>
      <div id="box33">
        <el-button  type="primary">+新建</el-button>
        <el-button>批量操作</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        id="table1"
      >
        <el-table-column type="selection" width="100"></el-table-column>
        <el-table-column label="权益图标" width="190">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="权益名称" width="180"></el-table-column>
        <el-table-column prop="address" label="最后修改时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button size="mini" @click="open(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger">删除</el-button> -->
            <el-link @click="pushedit(scope.row)"  type="primary">编辑</el-link>
           <el-link   type="primary" id="editlink">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div id="box5">
        <el-button type="primary">提交</el-button>
        <el-button>返回</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: true,
      input6:'',
      input7:'',
      id:'',
      type:'',
      img:'',
      status:'',
      imageUrl: "",
      
      editInfo:{},
      tableData: [
        {
          date: "2016-05-03",
          name: "商品折扣",
          address: "系统生成"
        },
        {
          date: "2016-05-03",
          name: "商品折扣",
          address: "系统生成"
        },
        {
          date: "2016-05-03",
          name: "商品折扣",
          address: "系统生成"
        }
      ],
      formData: {
        name: ""
      }
    };
  },
  methods: {
      edit(){
        this.$axios({
          url:'/vip/rights/update',
          method:'post',
          data:{
            id:this.id,
            name:this.input6,
            type:this.type,
            description:this.input7,
            img:this.img,
            status:this.status?1:0
          }
        }).then((res)=>{
              if(res.data.code==0){
                this.$message.info('修改成功');
                this.$router.push("/home/userRights");
              }
        })
      },
      handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.img= res.data
    
   },
     beforeAvatarUpload(file) {
    const isJPG = file.type === "image/jpeg";
    const isPNG = file.type === "image/png";
    const isLt2M = file.size / 120 / 120 < 3;

    if (!isJPG && !isPNG) {
      this.$message.error("上传头像图片只能是 JPG 格式!");
    }
    if (!isLt2M) {
      this.$message.error("上传头像图片大小不能超过 3MB!");
    }
    return (isJPG || isPNG) && isLt2M;
   }
  },
  mounted(){
    this.input6=this.$store.state.user.editInfo.name;
    this.input7=this.$store.state.user.editInfo.description
    this.id=this.$store.state.user.editInfo.id,
    this.type=this.$store.state.user.editInfo.type
    this.img=this.$store.state.user.editInfo.img
    this.status=this.$store.state.user.editInfo.status
  },
  
 
};
</script>
<style lang="less" scoped>
#box,
#box1,
#box2,
#box3,
#box4 {
  margin-left: 200px;
}
#editbox1 {
  margin-top: 30px;
}
#box22 {
  margin-top: 20px;
}
#box33 {
  float: right;
}
#box5 {
  margin-top: 30px;
  margin-left: 100px;
}
#editlink{
  margin-left: 10px;
}
</style>